<template>
  <div>
    <el-row :gutter="24">
      <el-col :span="24">
        <template>
          <el-form class="details-form" ref="form" :model="designerForm" :rules="rules" label-width="100px" label-position="left">
            <el-card shadow="never" class="margin-top-10">
              <div slot="header" class="clearfix">
                <strong>设计师资料</strong>
                <div class="update-unit-info">
                  <el-button size="mini" type="primary"  plain @click="updateUnitInfo()">修改信息</el-button>
                </div>
              </div>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="头像">
                    <div class="demo-type">
                      <el-avatar :size="60" @error="errorHandler">
                        <img :src="designer.avatar"/>
                      </el-avatar>
                    </div>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="设计师名称：">
                    <span>{{designer.nickname}}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="手机号：">
                    <span>{{designer.mobile}}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="创建时间：">
                    <span>{{designer.createTime}}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="个人介绍：">
                    <span>{{designer.introduce}}</span>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-card>
            <el-card shadow="never" class="margin-top-20">
              <div slot="header" class="clearfix">
                <strong>作品列表</strong>
              </div>
              <el-row type="flex" justify="space-between" align="middle"  class="margin-bottom-20">
                <el-table v-loading="tableLoading" :data="themeList"  style="width: 80%" :row-class-name="tableRowClassName">
                  <el-table-column :index="indexMethod" label="#" prop="Serial_number" sortable type="index"></el-table-column>
                  <el-table-column prop="name" label="作品名称" align="center">
                  </el-table-column>
                  <el-table-column prop="classifyName" label="作品分类" align="center">
                  </el-table-column>
                  <el-table-column
                    prop="thumb"
                    header-align="center"
                    align="center"
                    label="展示图">
                    <template slot-scope="scope">
                      <el-image
                        style="width: 90px; height: 60px"
                        :src="scope.row.thumb+'?x-oss-process=image/resize,h_100,w_100'" fit="contain"
                        @click="onPreview(scope.row.thumb)"
                        :alt="scope.row.thumb"/>
                    </template>
                  </el-table-column>
                  <el-table-column prop="describes" label="作品描述" align="center">
                  </el-table-column>
                  <el-table-column label="作品状态">
                    <template slot-scope="scope">
                      <el-tag type="success" v-if="scope.row.status===1">已上架</el-tag>
                      <el-tag type="warning" v-else-if="scope.row.status===2">已下架</el-tag>
                      <el-tag type="danger" v-else-if="scope.row.status===3">已删除</el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column prop="created" label="上传时间" align="center">
                  </el-table-column>
                </el-table>
              </el-row>
            </el-card>
          </el-form>
        </template>
      </el-col>
    </el-row>
    <el-image-viewer
      v-if="showViewer"
      :on-close="closeViewer"
      :url-list="[src]" />
    <!-- 弹窗, 修改单位信息 -->
    <unit-update v-if="updateVisible" ref="unitUpdate" @refreshDataList="refreshDataUnit"></unit-update>
  </div>
</template>
<script>
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
import unitUpdate from './designer-info-add-or-update'
export default {
  components: {
    unitUpdate,
    ElImageViewer
  },
  data () {
    return {
      errorHandler() {
        return true
      },
      designerForm: {
      },
      rules: {
      },
      designer: Object,
      themeList: [],
      tableLoading: true,
      updateVisible: false,
      showViewer: false,
      src: '',
    }
  },
  methods: {
    // 回显表单
    updateShow () {
      this.$http({
        url: this.$http.adornUrl(`/theme/designer-info/info/666`),
        method: 'get',
        params: this.$http.adornParams()
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.designer = data.designer
          this.themeList = data.designer.themeList
          this.tableLoading = false
        }
      })
    },
    onPreview(url) {
      this.src = url
      this.showViewer = true
    },
    // 关闭查看器
    closeViewer() {
      this.showViewer = false
    },
    indexMethod (index) {
      return index + 1
    },
    tableRowClassName ({ row, rowIndex }) {
      if (rowIndex % 2 == 1) {
        return 'success-row'
      }
      return ''
    },
    updateUnitInfo () {
      this.updateVisible = true
      this.$nextTick(() => {
        this.$refs.unitUpdate.init(this.designer.userId)
      })
    },
    refreshDataUnit (value) {
      this.updateVisible = false
    }
  },
  mounted () {
    this.updateShow()
  }
}
</script>
<style lang="scss">
  .el-table .warning-row {
    background: oldlace;
  }
  .el-table .success-row {
    background: #f0f9eb;
  }
  .update-unit-info {
    padding-left: 600px;
    padding-right: 600px;
}
</style>
